<template>
  <div class="shop-info">
    <van-nav-bar
      class="shop-nav"
      title="店铺基本信息"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <div class="shop-refuse" v-if="shopInfo.audit_state === 'refuse'">
      <p>审核不通过原因:{{ shopInfo.audit_info }}</p>
    </div>
    <van-form @submit="onSubmit">
      <van-field
        v-model="shopInfo.shop_name"
        name="店铺名称"
        label="店铺名称"
        placeholder="店铺名称"
        :rules="[{ required: true, message: '请填写店铺名称' }]"
      />
      <van-field
        name="uploader"
        label="店铺图像"
        :rules="[{ required: true, message: '请填上传图像' }]"
      >
        <template v-if="true" #input>
          <van-uploader :after-read="afterRead" v-model="uploader" max-count="1" />
        </template>
      </van-field>
      <van-field
        readonly
        clickable
        name="店铺行业"
        :value="shopBusi"
        label="店铺行业"
        placeholder="点击选择行业"
        @click="showPicker = true"
        :rules="[{ required: true, message: '请选择店铺行业' }]"
      />
      <van-field
        v-model="shopInfo.shop_address"
        type="textarea"
        name="店铺地址"
        label="店铺地址"
        rows="3"
        maxlength="50"
        show-word-limit
        placeholder="店铺地址"
        :rules="[{ required: true, message: '请填写店铺地址' }]"
      />
      <van-field
        v-model="shopInfo.shop_phone"
        type="number"
        label="店铺号码"
        name="店铺号码"
        placeholder="店铺号码"
        maxlength="11"
        minlength="11"
        :rules="[{ required: true, message: '请填写电话号码' }]"
      />
      <div style="margin: 16px;">
        <van-button
          class="submitBtn"
          :disabled="isUpdate"
          round
          block
          type="info"
          native-type="submit"
        >
          保存
        </van-button>
        <van-button round block type="info" native-type="button" @click="toShopPhoto">
          下一步
        </van-button>
      </div>
    </van-form>

    <!-- 店铺行业弹出框 -->
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="shopBusiList"
        value-key="busi_name"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { getShopBusi, addShopInfo, getShopInfo, updateShopInfo } from '@/api/shop'
export default {
  name: 'ShopInfo',
  props: {
    shopId: {
      type: [Number, String]
    }
  },
  data() {
    return {
      uploader: [],
      // 禁用
      isUpdate: true,
      shop_avatar: null,
      shopInfo: {
        shop_name: '',
        shop_busi_id: '',
        shop_address: '',
        shop_phone: ''
      },
      shopBusi: '',
      shopBusiList: [],
      showPicker: false
    }
  },
  created() {
    this.getShopBusi()
    if (this.shopId) {
      this.getShopInfo()
    }
  },
  mounted() {},
  watch: {
    shopInfo: {
      handler: function(val, oldval) {
        console.log(val, oldval)
        this.isUpdate = false
      },
      deep: true
    }
  },
  methods: {
    async getShopBusi() {
      const { data: res } = await getShopBusi(null)
      console.log(res.data)
      if (res.meta.status === 200) {
        this.shopBusiList = res.data
      } else {
        this.$toast.fail(res.meta.msg)
      }
    },
    afterRead(file) {
      this.shop_avatar = file.file
    },
    onSubmit() {
      const formData = new FormData()
      if (this.shop_avatar) {
        formData.append('shop_avatar', this.shop_avatar)
      }
      formData.append('shop_name', this.shopInfo.shop_name)
      formData.append('shop_busi_id', this.shopInfo.shop_busi_id)
      formData.append('shop_address', this.shopInfo.shop_address)
      formData.append('shop_phone', this.shopInfo.shop_phone)
      if (this.shopId) {
        this.updateShopInfo(formData)
      } else {
        this.addShopInfo(formData)
      }
    },
    async addShopInfo(formData) {
      this.$toast.loading({
        message: '提交中...',
        forbidClick: true,
        duration: 0
      })
      const { data: res } = await addShopInfo(formData)
      if (res.meta.status === 200) {
        this.shopId = res.data.shop_id
        this.$toast.success('店铺基本信息新增成功')
      } else {
        this.$toast.fail(res.meta.msg)
      }
    },
    async updateShopInfo(formData) {
      this.$toast.loading({
        message: '提交中...',
        forbidClick: true,
        duration: 0
      })
      const { data: res } = await updateShopInfo(this.shopId, formData)
      if (res.meta.status === 200) {
        this.$toast.success('店铺基本信息修改成功')
      } else {
        this.$toast.fail(res.meta.msg)
      }
    },
    onConfirm(value) {
      console.log(value)
      this.shopBusi = value.busi_name
      this.shopInfo.shop_busi_id = value.busi_id
      this.showPicker = false
    },
    async getShopInfo() {
      if (this.shopId) {
        const { data: res } = await getShopInfo(this.shopId)
        this.shopInfo = res.data
        this.uploader = [{ url: res.data.shop_avatar }]
        const index = this.shopBusiList.findIndex(item => res.data.shop_busi_id === item.busi_id)
        this.shopBusi = this.shopBusiList[index].busi_name
      }
    },
    toShopPhoto() {
      if ((this, this.shopId)) {
        this.$router.push(`/shop-photo/${this.shopId}`)
      } else {
        this.$toast.fail('请添加客户信息')
      }
    }
  }
}
</script>

<style scoped lang="less">
.shop-info {
  .shop-refuse {
    color: red;
    padding: 0 20px;
    font-size: 40px;
  }
  /deep/.shop-nav {
    background: #008bfa;
    .van-nav-bar__text,
    .van-nav-bar__title,
    .van-icon {
      color: #fff;
    }
  }
  .submitBtn {
    margin-bottom: 20px;
  }
}
</style>
